<template>
  <div class="completeRank">
    <s-title text="提前办结率排行榜" />
    <div id="completeRankChart"></div>
  </div>
</template>

<script>
import sTitle from "../../common/sTitle.vue";
import axios from "axios";
export default {
  name: "completeRank",
  components: {
    sTitle,
  },
  data() {
    return {
      list: [
        {
          name: "龙城镇",
          value: 10,
        },
        {
          name: "黄口镇",
          value: 20,
        },
        {
          name: "杨楼镇",
          value: 64,
        },
        {
          name: "刘套镇",
          value: 44,
        },
        {
          name: "马井镇",
          value: 44,
        },
        {
          name: "丁里镇",
          value: 44,
        },
      ],
      colorList: ["#f36c6c", "#e6cf4e", "#20d180", "#0093ff"],
    };
  },
  mounted() {
    axios.get(this.$serverIp + "getEarlyfinish").then((res) => {
      this.list = [];
      for (let i = 0; i < res.data.length; i++) {
        this.list.push({
          name: res.data[i].bmmc,
          value: res.data[i].tqbjl,
        });
      }

      this.setEchartHandle();
    });

  },
  methods: {
    setEchartHandle() {
      let _echarts = this.$echarts.init(
        document.getElementById("completeRankChart"),
        null,
        { devicePixelRatio: 2 }
      );
      let me = this;
      let option = {
        grid: {
          top: "2%",
          right: "17%",
          left: "30%",
          bottom: "8%",
        },
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            triggerEvent: true,
            show: true,
            inverse: true,
            data: this.getArrByKey(this.list, "name"),
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },

            axisLabel: {
              margin: 100,
              fontSize: 14,
              align: "left",
              color: "#fff",
              rich: {
                a1: {
                  color: "#fff",
                  backgroundColor: this.colorList[0],
                  width: 20,
                  height: 20,
                  align: "center",
                  borderRadius: 2,
                },
                a2: {
                  color: "#fff",
                  backgroundColor: this.colorList[1],
                  width: 20,
                  height: 20,
                  align: "center",
                  borderRadius: 2,
                },
                a3: {
                  color: "#fff",
                  backgroundColor: this.colorList[2],
                  width: 20,
                  height: 20,
                  align: "center",
                  borderRadius: 2,
                },
                b: {
                  color: "#fff",
                  backgroundColor: this.colorList[3],
                  width: 20,
                  height: 20,
                  align: "center",
                  borderRadius: 2,
                },
              },
              formatter: function (params) {
                var index = me.list.map((item) => item.name).indexOf(params);
                index = index + 1;
                if (index - 1 < 3) {
                  return [
                    "{a" + index + "|" + index + "}" + "  " + params,
                  ].join("\n");
                } else {
                  return ["{b|" + index + "}" + "  " + params].join("\n");
                }
              },
            },
          },
          {
            triggerEvent: true,
            show: true,
            inverse: true,
            data: this.getArrByKey(this.list, "name"),
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              shadowOffsetX: "-20px",
              color: ["#fff"],
              align: "left",
              verticalAlign: "center",
              lineHeight: 40,
              fontSize: 14,
              formatter: function (value, index) {
                return me.list[index].value + "%";
              },
            },
          },
        ],
        series: [
          {
            type: "pictorialBar",
            symbol:
              "image://",
            symbolSize: [45, 45],
            symbolOffset: [20, 0],
            z: 12,
            itemStyle: {
              normal: {
                color: "#fff",
              },
            },
            data: this.getSymbolData(this.list),
          },
          {
            type: "bar",

            yAxisIndex: 0,
            data: this.list,
            barWidth: 8,
            itemStyle: {
              normal: {
                color: new me.$echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(0, 216, 255, 1)",
                  },

                  {
                    offset: 1,
                    color: "rgba(0, 138, 255, 0)",
                  },
                ]),
                barBorderRadius: 10,
              },
            },
            showBackground: true,
            backgroundStyle: {
              borderRadius: 10,
            },
          },
        ],
      };
      _echarts.setOption(option);
    },
    getSymbolData(data) {
      let arr = [];
      for (var i = 0; i < data.length; i++) {
        arr.push({
          value: data[i].value,
          symbolPosition: "end",
        });
      }
      return arr;
    },
    getArrByKey(data, k) {
      let key = k || "value";
      let res = [];
      if (data) {
        data.forEach(function (t) {
          res.push(t[key]);
        });
      }
      return res;
    },
  },
};
</script>
<style scoped>
.completeRank {
  height: 30vh;
}
#completeRankChart {
  width: 100%;
  height: 23vh;
  margin-top: 10px;
}
</style>
 